<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市区三级联动</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <script src="js/axios-0.18.0.js" type="text/javascript"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="app">
    省：
    <!--<el-select v-model="value" placeholder="请选择">-->
        <!--<el-option-->
                <!--v-for="item in options"-->
                <!--:key="item.value"-->
                <!--:label="item.label"-->
                <!--:value="item.value">-->
        <!--</el-option>-->
    <!--</el-select>-->
    <el-select v-model="provinceCode" placeholder="省份" @change="findListByCode('cityCode')">
        <el-option
                v-for="item in AddressProvince"
                :value="item.id"
                :label="item.name"
        ></el-option>
    </el-select>
    市：
    <el-select v-model="cityCode" placeholder="城市"  @change="findListByCode('value')">
        <el-option
                v-for="item in AddressCity"
                :value="item.id"
                :label="item.name"
        ></el-option>
    </el-select>
    区：
    <el-select v-model="value" placeholder="区域">
        <el-option
                v-for="item in AddressTown" :value="item.id"  :label="item.name">

        </el-option>

    </el-select>
</div>

</body>
<script>
    new Vue ({
        el:"#app",
        name: 'HelloWorld',
        data:{
                AddressProvince: [],
                AddressCity: [],
                AddressTown: [],
                provinceCode: '',
                cityCode: '',
                value: ''
        },
        created () {

            this.findListByCode('100000');
        },
        methods: {
            handleChange (value) {
                console.log(value);
            },
            findListByCode (val) {
                debugger
                let selectval = "";

                if(val=="cityCode"){
                    selectval = this.provinceCode;
                }else if(val=="value"){
                    selectval = this.cityCode;
                }else{
                    selectval = val;
                }


                let app = this;
                axios.get("http://localhost:8080/queryCity?region="+selectval).then(resp => {
                    if(val=="cityCode"){
                        app.AddressCity = resp.data;
                    }else if(val=="value"){
                        app.AddressTown = resp.data;
                    }else{
                        app.AddressProvince = resp.data;
                    }

                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                });
            }
        }
    })
</script>
</html>